import { getSubjectsApi } from "@/api";
import { Drawer } from "@mui/material";
import React, { useEffect, useState } from "react";

export default function Sbujects() {
  const [subjects, setSubjects] = useState<ISubject[]>([]);
  const [show, setShow] = useState(false);
  const getAllSubjects = () => {
    let list = sessionStorage.getItem("subjects");
    if (list) {
      setSubjects(JSON.parse(list));
      setShow(true);
    } else {
      // 这个请求得到的数据，在一定时间内是不会变化的
      // 这种数据我们应该在浏览器进行缓存 -- sessionStorage
      // 思路： 第一次请求，就是从服务器获取
      // 然后把数据缓存起来，后面就每次都从缓存里面获取
      getSubjectsApi().then((res) => {
        if (res.errCode === 0) {
          // 渲染数据
          setSubjects(res.data);
          setShow(true);
          // 把数据缓存
          sessionStorage.setItem("subjects", JSON.stringify(res.data));
          // 如果担心数据在2小时内变化了，可以在这存一个时间，每次从缓存取数据的时候，判断时间是否已经超过了，如果超过了，重新请求
          // sessionStorage.setItem('timeout',(new Date()).getTime().toString())
        }
      });
    }
  };

  return (
    <div>
      <h2 onClick={getAllSubjects}>Java学科</h2>
      <Drawer anchor="left" open={show} onClose={() => setShow(false)}>
        <ul>
          {subjects.map((item) => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      </Drawer>
    </div>
  );
}
